library(tidyverse)
By the end of this class you will :
Dashboards are an incredibly powerful and important tool for exploring data and trends. In STAT547 we will talk briefly about what Dashboards are, and what they are used for but most of the lecture time will be focused on actually making dashboards, adding different elements, styling it, and deploying it so they are available publicly.
Here is our plan for the next 2 weeks:
| Class | Key outcome |
|---|---|
| cm107 (today) | Introduction to Dash framework and creating your first app |
| cm108 | Linking Dash components using callbacks |
| cm109 | Layouts and multi-level callbacks |
| cm110 | Styling dashboards |
By the end of these four classes, you will be able to create this dashboard.
(Class demo)
Before you build a dashbard, make sure it has a purpose!
Do not build one just for the sake of building one and contribute more noise!
Questions to ask yourself:
This is what we’re up against when creating dashboards:
Source: Paul Cothenet’s blog post.
Here is what many consider in the industry to be a gold standard for dashboards. We will step through several elements of the dashboard to understand why this dashboard is so effective.
And here is the annotated dashboard.
Source: Stripe Docs
Here is one more example of an effective dashboard:
In the cm107 participation folder, you should create a new file called app.R. We will add to the app together during the lecture and by the end of the class, we should all have a functioning app. Before we get to that, let’s first get some terminology out of the way. Below are notes that will be useful for you when creating your dashboards.
See the issue I created here for more details. It may also be useful to check the dash docs for more information on installing DashR.
plot.ly is both a company and an open source visualization library in python, R, and javascript (soon in Matlab and Julia).Dash is a Dashboard framework created by plot.ly that allows users to easily take their existing visualizations and make them interactiveggplotly is both a package and a function that converts your ggplot2 figures into interactive ones powered by plotly.js, ready for embedding into Dash applications.In Stat547, we will be creating Dash apps using ggplot2 objects.
Below are other major Dash-related packages.
The dashCoreCoponents package includes dashboard components such as dropdown menus, tabs, sliders, and graphs.
Some important core components are:
| Component Name | Description |
|---|---|
dccDropdown |
dropdown menu of values, with single or multiple value selection |
dccSlider |
one way slider of values, with one way value selection |
dccRangeSlider |
two way slider of values, with two way value selection |
dccChecklist |
list of values, with multiple value selection |
dccRadioItems |
list of values, with single value selection |
dccTabs |
tab, similar to a browser tab |
dccGraph |
Plotly graph |
dccMarkdown |
Markdown text, supports Markdown syntax |
dashHtmlComponents package includes components to format the layout of the dashboard and the text in the dashboard.| Component Name | Description |
|---|---|
htmlDiv |
dahsboard division |
htmlH1 |
heading |
htmlLabel |
text |
Today we wil look at the minimum required elements to create a DashR dashboard. There are 2 more elements that we will get to next lecture.
app <- Dash$new() creates a new instance of a dash appapp$layout()app$layout() describes the layout of your app.htmlDiv is placed inside an app$layout() call that allows you to specify where to add “Divs” in your dashboard. For example, create an area for plots, a header for a title, or a sidebar for filters. It also allows you to specify where in your dashboard to place your graphs and filters. We will look at these later in the layouts section ; for now, you will need just one div and specify Dash components using a listapp$run_server() runs your Dash app.$ Rscript app.R in your terminal.debug=TRUE to the app$run_server call.In the section below, paste the code from your app.R. For participation today, you will need to create a functioning app.R and include it in your cm107 participation directory AND paste the code below.
This is all that is required from you today for participation marks.
# author: Diana Lin
# date: 2020-03-17
"This script is the main file that creates a Dash app.
Usage: app.R
"
# 1. Load libraries
library(dash)
library(tidyverse)
library(plotly)
library(dashCoreComponents)
library(dashHtmlComponents)
# 2. Create Dash instance
app <- Dash$new()
# 3. Specify App layout
# add ggplot
plot <- mtcars %>%
ggplot() +
theme_bw() +
geom_point(aes(x = mpg, y = hp) ) +
labs(x = 'Fuel efficiency (mpg)',
y = 'Horsepower (hp)') +
ggtitle(("Horsepower and Fuel efficiency for "))
plot <- ggplotly(plot)
app$layout(
htmlDiv(
list(
htmlH1('Hello world Dash application'),
htmlH2('This is a subheading'),
dccDropdown(
options=list(
list(label = "New York City", value = "NYC"),
list(label = "Montréal", value = "MTL"),
list(label = "San Francisco", value = "SF")
),
value="MTL"
),
dccGraph(id='mtcars', figure = plot)
)
)
)
# 4. Run app
app$run_server(debug = TRUE)
# Run in terminal
Rscript app.R
# View in RStudio
rstudioapi::viewer("http://127.0.0.1:8050")
Assignment 4 has been posted here.